// components/tabs/tabs.js
import regeneratorRuntime from '../../utils/runtime.js';

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        dataArr: {
            type: Array,
            value: []
        }
    },
    options: {
        // 指定所有 _ 开头的数据字段为纯数据字段
        pureDataPattern: /^_/,
        // 在组件定义时的选项中启用多slot支持
        multipleSlots:true
    },
    /**
     * 组件的初始数据
     */
    data: {
        // 顶部tab栏是否隐藏
        tabs_title_state: true, // 修改为true
        slip: null,
        // tab栏划块的宽度
        slipWidth: '0%',
        // tab栏划块距离左边
        slipLeft: '0%',
        // 顶部滚动条left距离
        scrollLeft:0,
        // 当前所在滑块的 index 给页面用
        current:0,
        // 当前所在滑块的 index 给程序用
        _current:0,
        // 定时器, 用于顶部tab隐藏显示
        _time1:null,
        // 定时器,用于scroll-view 滚动吸附
        _time2:null,
        // 标志滚动条最后一次由手动设置,
        _tag:false
    },
    lifetimes: {
        //在组件实例进入页面节点树时执行
        attached() {
            let slipWidth = Math.round(100 / this.data.dataArr.length);
            slipWidth = slipWidth < 20 ? 20 + '%' : slipWidth + '%';
            this.setData({slipWidth})
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // tabs 栏点击事件
        handleItemTap(e) {
            let {index}=e.currentTarget.dataset;
            this.setData({current:index});
            this.hidenTabs();
        },
        // 划块伸缩跟随
        handleTransition1(e) {
            let {dx} = e.detail;
            let {dataArr,slipLeft,_current}=this.data;
            // 页面宽度
            let pageWidth=wx.getSystemInfoSync().windowWidth;
            // 划块固定的宽度
            let fixedSlipWidth=dataArr.length>5?pageWidth*0.2:pageWidth/dataArr.length;
            // 追加的滑块宽度
            // 划块宽度变大
            let newSlipWidth=(Math.abs(dx)/pageWidth)*fixedSlipWidth*2;
            if(newSlipWidth>fixedSlipWidth){
                // 滑动过半 ,滑块宽度变小
                // 公式: dx / pageWidth = newSlipWidth / x,演变:x  = newSlipWidth / - dx / pageWidth
                newSlipWidth=fixedSlipWidth*2-newSlipWidth-(Math.abs(dx)/pageWidth);
            }
            if(dx>0){
                if(Math.abs(dx)>pageWidth/2){
                    // 向右移动, 划动过半
                    slipLeft=fixedSlipWidth-newSlipWidth+(_current*fixedSlipWidth);
                }else {
                    slipLeft=(_current*fixedSlipWidth);
                }
            }else {
                if(Math.abs(dx)>pageWidth/2){
                    // 向左移动, 划动过半
                    slipLeft=(--_current*fixedSlipWidth);
                }else {
                    slipLeft=(_current*fixedSlipWidth)-newSlipWidth;
                }
            }
            let slipWidth=fixedSlipWidth+newSlipWidth+'px';
            slipLeft=parseInt(slipLeft)+'px';
            this.setData({slipWidth,slipLeft})
        },
        // 滑块平移跟随
        handleTransition(e) {
            // 公式: dx / pageWidth = x /  fixedSlipWidth
            let {dx} = e.detail;
            let {dataArr,slipLeft,_current}=this.data;
            // 页面宽度
            let pageWidth=wx.getSystemInfoSync().windowWidth;
            // 划块固定的宽度
            let fixedSlipWidth=dataArr.length>5?pageWidth*0.2:pageWidth/dataArr.length;
            // 计算滑块移动 left值
            slipLeft=dx/pageWidth*fixedSlipWidth+(_current*fixedSlipWidth)+'px';
            this.setData({slipLeft})
        },
        // 划块跟随移动, 遗留, 划块跟随移动
        handleChange(e){
            let {current}=e.detail;
            this.setData({_current:current});
            this.hidenTabs();
        },
        bindanimationfinish(e){
            let {current}=e.detail;
            this.setData({_current:current});
            this.hidenTabs();
        },
        // 用于隐藏顶部tab栏
        hidenTabs(){
            return;
            clearTimeout(this.data._time1);
            let _time1=setTimeout(()=>{
                this.setData({tabs_title_state:false})
            },3000)
            this.setData({_time1,tabs_title_state:false}) // 修改为true
        },
        // tab栏滚动事件
        handleScroll(e){
            // time2用于防止事件死循环
            clearTimeout(this.data._time2);
            let {dataArr,slipWidth,_tag}=this.data;
            if(_tag){
                this.setData({_tag:false});
                return;
            }
            this.hidenTabs();
            let _time2=setTimeout(()=>{
                let {scrollLeft,scrollWidth}=e.detail;
                let {dataArr,slipWidth}=this.data;
                let skill=scrollWidth/dataArr.length;
                scrollLeft=Math.round(scrollLeft/skill)*skill;
                this.setData({scrollLeft,_tag:true})
            },100);
            this.setData({_time2})
        }
    }
})
